<div class="content">
  <cdk-virtual-scroll-viewport
    itemSize="42"
    minBufferPx="400"
    maxBufferPx="600"
    *ngIf="ciphers.length"
  >
    <div class="list">
      <button
        type="button"
        *cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
        appStopClick
        (click)="selectCipher(c)"
        (contextmenu)="rightClickCipher(c)"
        title="{{ 'viewItem' | i18n }}"
        [ngClass]="{ active: c.id === activeCipherId }"
        [attr.aria-pressed]="c.id === activeCipherId"
        class="flex-list-item virtual-scroll-item"
      >
        <app-vault-icon [cipher]="c"></app-vault-icon>
        <div class="flex-cipher-list-item">
          <span class="text">
            {{ c.name }}
            <ng-container *ngIf="c.organizationId">
              <i
                class="bwi bwi-collection text-muted"
                title="{{ 'shared' | i18n }}"
                aria-hidden="true"
              ></i>
              <span class="sr-only">{{ "shared" | i18n }}</span>
            </ng-container>
            <ng-container *ngIf="c.hasAttachments">
              <i
                class="bwi bwi-paperclip text-muted"
                title="{{ 'attachments' | i18n }}"
                aria-hidden="true"
              ></i>
              <span class="sr-only">{{ "attachments" | i18n }}</span>
            </ng-container>
          </span>
          <span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
        </div>
      </button>
    </div>
  </cdk-virtual-scroll-viewport>
  <div class="no-items" *ngIf="!ciphers.length">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
    <ng-container *ngIf="loaded">
      <img class="no-items-image" aria-hidden="true" />
      <p>{{ "noItemsInList" | i18n }}</p>
      <button (click)="addCipher()" class="btn block primary link">{{ "addItem" | i18n }}</button>
    </ng-container>
  </div>
</div>
<div class="footer">
  <button
    (click)="addCipher()"
    (contextmenu)="addCipherOptions()"
    class="block primary"
    appA11yTitle="{{ 'addItem' | i18n }}"
    [disabled]="deleted"
  >
    <i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
  </button>
</div>
